<template>
  <div>
    <h3 slot="title">Web Vulnerabilities</h3>
    <a-table
      :dataSource="webData"
      rowKey="id"
      :loading="loading"
      :pagination="false"
      :scroll="{x:'980px'}"
    >
    <a-table-column title="ID" key="id" :width="50">
        <template slot-scope="record">
          {{record.id+1}}
        </template>
      </a-table-column>
      <a-table-column title="漏洞类型" key="plugin" class="filter-column" :width="100">
        <template slot-scope="record">
          <a-tag :color="vulType2Tag(record.type)">{{record.type}}</a-tag>
        </template>
      </a-table-column>
      <a-table-column
        title="Url"
        key="target"
      >
        <template slot-scope="record">
          <div>
          <a
            :href="record.url"
            @click.prevent.stop="window.open(record.url)"
            >{{ record.url }}</a
          >
          </div>
        </template>
      </a-table-column>
      <a-table-column title="漏洞描述" key="desc">
        <template slot-scope="record">
          <ul>
            <li>{{ record.result }}</li>
            <div v-for="(values, key,index) in record.detail" :key=index>
              <li v-for="(value, aaa) in values" :key=aaa>{{value.msg}}</li> 
            </div>
          </ul>
        </template>
      </a-table-column>
      <a-table-column
        title="CreateTime"
        key="create_time"
        :width="120"
      >
        <template slot-scope="record">
          {{ record.createtime}}
        </template>
      </a-table-column>
      <a-table-column title="操作" key="optionn" :width="100">
        <template slot-scope="record">
          <a href="javascript:;" @click="showModal(record)">详情</a>
        </template>
      </a-table-column>
    </a-table>

    <a-modal title="漏洞详情" v-model="visible" @ok="handleOk" :width="980" style="top: 20px;">
      <div class="modal-vul">
      <p><a-icon type="link" /> <span>{{this.showdata.url }}</span></p>
      <p><a-icon type="info-circle" /> <span>{{this.showdata.result }}</span></p>
      <a-tabs defaultActiveKey="1" style="word-break:break-all; word-wrap:break-all;">
        <a-tab-pane tab="基础信息" key="1">
          <table>
            <th><td style="width:120px"></td><td></td></th>
            <tr><td>漏洞类型</td><td>{{this.showdata.type }}</td></tr>
            <tr><td>插件名称</td><td>{{this.showdata.name }}</td></tr>
            <tr><td>插件路径</td><td>{{this.showdata.path }}</td></tr>
            <tr><td>创建时间</td><td>{{this.showdata.createtime }}</td></tr>
          </table>
          <div style="margin-top:20px">
<a-timeline>
              <a-timeline-item color="green" v-for="(values,kk) in this.showdata.detail" :key=kk>
                <div>
                  <p>{{kk}}</p>
                  <table v-for="(obj,index) in values" :key=index>
                    <p>{{obj.basic}}</p>
                    <p>{{obj.msg}}</p>
                  </table>
                </div>
              </a-timeline-item>
                <a-timeline-item color="gray">
                </a-timeline-item>

            </a-timeline>
          </div>
        
        </a-tab-pane>
        <a-tab-pane :tab=kk forceRender v-for="(values,kk) in this.showdata.detail" :key=kk>
          <div v-for="(obj,index) in values" :key=index>
              <table style="margin-bottom:20px">
                <tr><th style="width:80px;"></th></tr>
                <tr><td>param</td><td>{{obj.basic.param}}</td></tr>
                <tr><td>value</td><td>{{obj.basic.value}}</td></tr>
                <tr><td>position</td><td>{{obj.basic.position}}</td></tr>
              </table>
              <h3>请求信息</h3>
              <p><a-icon type="link" /> {{obj.msg}}</p>
              <h3>请求包</h3>
              <pre>{{obj.request}}</pre>
              <h3>返回包</h3>
              <pre>{{obj.response}}</pre>
          </div>
        </a-tab-pane>
    </a-tabs>
    </div>
    </a-modal>
  </div>
</template>

<script>
// import {vulType2Tag} from "../utils";
export default {
  name: "web-vulnerability",
  mounted() {
    this.webData = this.data;
  },
  props: {
    data: Array,
    loading: Boolean
  },
  data() {
    return {
      window: window,
      tableLoading: this.loading,
      webData: [],
      showdata:false,
      visible: false
    };
  },
  methods: {
    
    showModal(record) {
      this.showdata = record;
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    vulType2Tag(vultype) {
  const VULREPLACE = {
    cmd_injection: "red",
    code_injection: "red",
    xss: "orange",
    sqli: "red",
    dirscan: "cyan",
    path_traversal: "#2db7f5",
    xxe: "#f50",
    brute_force: "green",
    jsonp: "blue",
    ssrf: "#87d068",
    baseline: "green",
    redirect: "#87d068",
    crlf: "orange",
    sensitive: "blue",
    smuggling: "green"
  };
  for (var key in VULREPLACE) {
    if (key == vultype) {
      let color = VULREPLACE[key];
      return color;
    }
  }
  return '';
}
  },
  computed: {},
  watch: {
    data(newData) {
      this.webData = newData;
    },
    loading(newData) {
      this.tableLoading = newData;
    }
  }
};
</script>
<style scoped>
pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

</style>